<template>
	<view class='page_cont'>
		<view class='top_bar' :style="topStyle">
			<view class='top_view' :style="{height:statusBarHeight+'px'}"></view>
			<view class='bar_wrap'>
				<image class='icon' :src="back_type==1?'/static/icon22.png':'/static/icon22.png'" @click='nav_home()'></image>
				<view class='bar_title'>
					<image class='logo' :src="logo" mode="aspectFill" v-show="logo"></image>
					<view class='title'>{{name}}</view>
				</view>
			</view>
		</view>
		<view class='banner_box'>
			<swiper class='swiper' :autoplay="true" :circular="true" :interval="3000" :duration="1000" :current="current_index" @change="swiper_change">
				<swiper-item v-for='(item,index) in swipers' :key="index">
					<image class="img" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="indication">
				<block v-for="(item,index) in swipers" :key="index">
					<view class="spot" :class="current_index==index?' active':''"></view>
				</block>
			</view>
		</view>
		<view class='mech_wrap'>
			<view class='mech_desc'>
				<image class='logo' :src="info.logoImg" mode="aspectFill"></image>
				<view class='name_wrap'>
					<view class='name_box'>
						<view class='name'><scroll-view class='text' scroll-x="true" scroll-with-animation="true">{{info.name}}</scroll-view></view>
						<image class='icon' src="/static/icon24.png" v-if="info.isCertified==1"></image>
					</view>
					<view class="point_box">
						<scroll-view class='point' scroll-x="true" scroll-with-animation="true">教育范围：{{info.categoryNames?info.categoryNames:''}}</scroll-view>
					</view>
				</view>
				<view class='coll_wrap' @click="user_coll_mech()">
					<view class='icon_box'><image class='icon' :src="info.collectionId?'/static/icon19.png':'/static/icon18.png'"></image></view>
					<view class='text'>{{info.collectionId?'已收藏':'收藏'}}</view>
				</view>
			</view>
			<view class='mech_adr'>
				<view class='title'></view>
				<view class='adr_wrap'>
					<view class='adr_box'>
						<image class='icon_adr' src="/static/icon16.png"></image>
						<view class='adr_detail' @click="nav_location()">
							<view class='adr'>{{info.mech_address}}</view>
							<view class='adr_space'>
								<view class='text' v-if="info.distance">{{info.space}}{{info.distance>1000?'km':'m'}}</view>
								<image class='icon' src="/static/icon25.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='mech_cont'>
				<view class='check_wrap'>
					<view class='item' :class="check_index==index?'active':''" v-for="(item,index) in checks" :key='index' @click="check_content(index)">
						<view class='text'>{{item}}</view>
						<view class='line' v-if="check_index==index"></view>
					</view>
				</view>
				<view class='job_cont' v-show="check_index==0">
					<view class='job_list' v-if="jobs.length>0">
						<view class='job_item' v-for='(item,index) in jobs' :key='index' @click='nav_job_detail(item.id)'>
							<view class='job_title'>
								<view class='job_name'>{{item.name}}</view>
								<view class='job_wages'>{{item.salary}}</view>
							</view>
							<view class='job_dem'>{{item.workAddressCity}}-{{item.workAddressRegion}}<text class='text3'>{{item.minimumEducationName}}</text>{{item.workExperienceName}}</view>
							<view class='job_label_box'>
								<scroll-view class='scroll_label' scroll-with-animation="true" scroll-x="true">
									<view class='label' v-if="item.hierarchyName">{{item.hierarchyName}}</view>
									<view class='label' v-if="item.teacherModeName">{{item.teacherModeName}}</view>
									<view class='label' v-if="item.startDate">{{item.startDate}}</view>
								</scroll-view>
							</view>
							<view class='job_give'>
								<image class='avatar' :src="item.createByAvatar?item.createByAvatar:'/static/icon27.png'" mode="aspectFill"></image>
								<view class='name'>{{item.createByName?item.createByName:item.businessName}}</view>
							</view>
						</view>
					</view>
					<view class='no_job' v-if="show_no">暂未发布职位信息</view>
				</view>
				<view class='synop_cont' v-show="check_index==1">
					<view class='cont'>
						<rich-text :nodes="info.synopsis" space="nbsp" v-if="info.synopsis"></rich-text>
						<view class='no_cont' v-else>
							<view class='text'>暂无机构简介</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class='bind_mask' v-if="type==2">
			<view class='footer'>
				<view class='con_btn' @click="confirm_mech()">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import home from "../../api/home.js"
	import config from "../../api/config.js"
	import util from "../../utils/util.js"
	export default{
		data(){
			return {
				id: '',
				type: '',
				info: '',
				statusBarHeight: '',
				topStyle: '',
				logo: '',
				name: '',
				back_type: 1,
				swipers: [],
				current_index: 0,
				checks: ["职位","简介"],
				check_index: 0,
				jobs: [],
				currentPage: 1,
				pageSize: 10,
				hasMoreDate: true,
				latitude: 22.80536,
				longitude: 113.29321,
				login: false,
				userinfo: '',
				principalPhone:'',
				businessId:'',
				show_no: false
			}
		},
		onLoad(options){
			var that=this;
			var sysinfo = wx.getSystemInfoSync(),statusBarHeight=sysinfo.statusBarHeight;
			that.statusBarHeight=statusBarHeight;
			that.id=options.id;
			that.type=options.type;
			that.check_index=options.type==2?1:0;
			//
			uni.getStorage({
				key: "user_address",
				success(res){
					var info=res.data;
					that.latitude=info.lat;
					that.longitude=info.lng;
					that.get_mech_detail(options.id,1)
				},
				fail(){
					that.get_mech_detail(options.id,1)
				}
			})
		},
		onPageScroll(e) {
			// console.log(e)
			var scroll=e.scrollTop;
			if(scroll>50){
				this.topStyle="background:rgba(255,255,255,1)";
				this.logo=this.info.logoImg;
				this.name=this.info.name;
			}else{
				this.topStyle="background:rgba(255,255,255,0)";
				this.logo="";
				this.name=""
			}
		},
		// 触底
		onReachBottom() {
			var that=this;
			if(that.check_index==0){
				if(that.hasMoreData){
					that.get_job_list()
				}else{
					util.page_show_toast('没有更多了',1500)
				}
			}
		},
		onShow() {
			var that=this;
			uni.getStorage({
				key: "token",
				success(res){
					that.login=true;
					that.userinfo=uni.getStorageSync("userinfo");
				}
			})
		},
		methods:{
			// 轮播
			swiper_change(e){
				this.current_index=e.detail.current;
			},
			// 收藏
			user_coll_mech(){
				if(this.login){
					if(this.info.collectionId){
						this.delete_coll_mech();
					}else{
						this.create_token();
					}
				}else{
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			// 返回
			nav_home(){
				uni.navigateBack({
					delta: 1,
					fail:function(res){
						uni.reLaunch({
							url: "../../pages/index/index"
						})
					}
				})
			},
			// 路线导航
			nav_location(){
				uni.openLocation({
					latitude: this.info.lat,
					longitude: this.info.lng,
					name: this.info.name,
					address: this.info.mech_address
				})
			},
			// 选择
			check_content(index){
				this.check_index=index;
			},
			// 跳转
			nav_job_detail(id){
				uni.navigateTo({
					url: "../../pages/jobDetail/jobDetail?id="+id+'&status=6'
				})
			},
			// 确定绑定
			confirm_mech(){
				uni.navigateTo({
					url: `../bindUnitCode/bindUnitCode`
				})
			},
			// 详情
			get_mech_detail(id,type){
				uni.showLoading()
				var params={
					"businessId": id,
					"lat": this.latitude,
					"lng": this.longitude
				}
				home.get_mech_detail(params).then(res=>{
					// console.log(res);
					uni.hideLoading()
					var info=res.data.data;
					uni.setStorage({
						key:'business_Info',
						data:JSON.stringify({
							businessId:info.id,
							businessName:info.name,
							principalPhone:info.principalPhone,
							businessLogo:info.logoImg,
							isLogin:1,
						})
					})
					this.principalPhone=info.principalPhone
					info.mech_address=info.detail?(info.detail.indexOf("省")>0?info.detail:info.province+info.city+info.region+info.town+info.detail):info.province+info.city+info.region+info.town;
					info.space=info.distance>1000?(info.distance/1000).toFixed(2):info.distance;
					var details=info.synopsis?info.synopsis:'';
					if(details){
						if(details.indexOf('img')>-1){
							details=details.replace(/\<img/gi, '<img style="max-width:100%;height:auto;" ')
						}
						if(details.indexOf('<style>')>-1){
							details=details.replace(/<style>[\s\S]*?<\/style>/ig,'')
						}
						if(details.indexOf('<script>')>-1){
							details=details.replace(/<script>[\s\S]*?<\/script>/ig,'')
						}
					}
					info.synopsis=details;
					this.info=info;
					this.swipers=info.synopsisImg?info.synopsisImg.split(","):[info.logoImg];
					if(type==1){
						this.get_job_list();
					}
				})
			},
			// 职位列表
			get_job_list(){
				var params={
					"currentPage": this.currentPage,
					"pageSize": this.pageSize,
					"businessId": this.id,
					"type": 2,
					"sidx": "create_time",
					"order": "desc",
					"lat": this.latitude,
					"lng": this.longitude
				};
				home.get_ment_list(params).then(res=>{
					var list=res.data.data.records;
					list.forEach(item=>{
						item.salary = item.salaryMin==0?"面议":`${item.salaryMin/1000}-${item.salaryMax/1000}k/月`
					})
					//
					var jobs=util.extend(this.jobs, list)
					if (list.length < this.pageSize) {
						this.jobs=jobs;
						this.hasMoreData=false;
					} else {
						this.jobs=jobs;
						this.hasMoreData=true;
						this.currentPage=this.currentPage+1;
					}
					if(list.length==0&&jobs.length==0){
						this.show_no=true
					}
				})
			},
			// 防重复提交幂等token
			create_token(){
				config.create_token().then(res=>{
					this.coll_mech(res.data.data);
				})
			},
			// 收藏
			coll_mech(x_token){
				var params={
					"targetId": this.id,
					"targetType": 3
				}
				home.add_coll(params,x_token).then(res=>{
					this.get_mech_detail(this.id);
					util.page_show_toast("收藏成功",1500);
				})
			},
			// 取消收藏
			delete_coll_mech(){
				var params={
					"id": this.info.collectionId
				}
				home.cancel_coll(params).then(res=>{
					this.get_mech_detail(this.id);
					util.page_show_toast("取消收藏成功",1500);
					if(this.type==4){
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2];
						prevPage.$vm.refresh=true;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: linear-gradient(180deg, #FFFFFF 0%, #F6F7F9 100%);
		.page_cont{
			width: 100%;
			background: linear-gradient(180deg, #FFFFFF 0%, #F6F7F9 100%);
			.top_bar{
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 1001;
				width: 100%;
				background: rgba(255,255,255,0);
				transition: all 0.3s linear;
				.top_view{
					width: 100%;
				}
				.bar_wrap{
					width: 100%;
					box-sizing: border-box;
					padding: 12rpx 210rpx 12rpx 32rpx;
					display: flex;
					flex-direction: row;
					align-content: center;
					.icon{
						width: 64rpx;
						height: 64rpx;
						margin-right: 20rpx;
					}
					.bar_title{
						flex: 1;
						width: 0;
						display: flex;
						flex-direction: row;
						align-items: center;
						.logo{
							border: 2rpx solid rgba(112,112,112,0.1);
							border-radius: 4rpx;
							width: 36rpx;
							height: 36rpx;
							margin-right: 10rpx;
						}
						.title{
							flex: 1;
							width: 0;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							color: #424752;
							font-weight: 600;
							line-height: 40rpx;
							text-align: left;
						}
					}
				}
			}
			.banner_box{
				width: 100%;
				position: relative;
				.swiper{
					width: 100%;
					height: 488rpx;
					.img{
						width: 100%;
						height: 488rpx;
					}
				}
				.indication{
					position: absolute;
					bottom: 94rpx;
					left: 32rpx;
					display:flex;
					flex-direction:row;
					align-items:center;
					justify-content:center;
				}
				.spot{
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					margin-right: 8rpx;
					background: #EAEDF0;
					transition: all 0.3s;
				}
				.active{
					width: 20rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background: #5B90FF;
				}
			}
			.mech_wrap{
				padding: 40rpx 32rpx 0 32rpx;
				background: linear-gradient(180deg, #FFFFFF 0%, #F6F7F9 100%);
				border-radius: 40rpx 40rpx 0px 0px;
				transform: translateY(-48rpx);
				.mech_desc{
					display: flex;
					flex-direction: row;
					.logo{
						width: 90rpx;
						height: 90rpx;
						border: 2rpx solid rgba(144,144,144,0.11);
						border-radius: 8rpx;
					}
					.name_wrap{
						flex: 1;
						width: 0;
						margin: 0 20rpx;
						.name_box{
							width: 100%;
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-bottom: 6rpx;
							.name{
								height: 50rpx;
								overflow: hidden;
								.text{
									max-width: 450rpx;
									width: auto;
									height: 64rpx;
									font-size: 36rpx;
									font-weight: 600;
									line-height: 50rpx;
									color: #3F4A58;
									margin-right: 16rpx;
									overflow: hidden;
									white-space: nowrap;
								}
							}
							.icon{
								width: 100rpx;
								height: 34rpx;
							}
						}
						.point_box{
							height: 34rpx;
							overflow: hidden;
							.point{
								width: 100%;
								height: 48rpx;
								font-size: 24rpx;
								font-weight: 400;
								line-height: 34rpx;
								color: #929BA7;
								overflow: hidden;
								white-space: nowrap;
							}
						}
					}
					.coll_wrap{
						padding: 2rpx 24rpx 0 0;
						width: 66rpx;
						.icon_box{
							width: 48rpx;
							height: 48rpx;
							margin: 0 auto 6rpx auto;
							.icon{
								width: 100%;
								height: 100%;
							}
						}
						.text{
							text-align: center;
							height: 32rpx;
							font-size: 22rpx;
							font-weight: 400;
							line-height: 32rpx;
							color: #929BA7;
						}
					}
				}
				.mech_adr{
					background: linear-gradient(271deg, #CCD7EC 0%, #AAB6D7 100%);
					border-radius: 16rpx;
					margin: 32rpx 0 48rpx 0;
					.title{
						// padding: 12rpx 24rpx;
						height: 10rpx;
						// font-size: 24rpx;
						// font-weight: 400;
						// line-height: 6rpx;
						// color: #FFFFFF;
						.txt{
							margin-left: 24rpx;
						}
					}
					.adr_wrap{
						width: 100%;
						background: url("https://ossdev0.jiabala.com/eNXJ84TjHjpT7")no-repeat 0 0/100% 100%;
						border-radius: 16rpx;
						.adr_box{
							padding: 24rpx;
							display: flex;
							flex-direction: row;
							border-radius: 16rpx;
							background: linear-gradient(270deg, rgba(255, 255, 255, 0.78) 0%, #F6F9FD 100%);
							.icon_adr{
								width: 30rpx;
								height: 30rpx;
								margin-right: 12rpx;
								position: relative;
								top: 6rpx;
							}
							.adr_detail{
								flex: 1;
								display: flex;
								flex-direction: row;
								align-items: center;
								.adr{
									flex: 1;
									width: 0;
									line-height: 40rpx;
									font-size: 28rpx;
									font-weight: 400;
									color: #798594;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									word-break: break-all;
									margin-right: 20rpx;
								}
								.adr_space{
									display: flex;
									flex-direction: row;
									align-items: center;
									.text{
										height: 28rpx;
										font-size: 24rpx;
										font-weight: 600;
										line-height: 28rpx;
										color: #5B90FF;
										margin-right: 6rpx;
									}
									.icon{
										width: 24rpx;
										height: 24rpx;
									}
								}
							}
						}
					}
				}
				.mech_cont{
					width: 100%;
					.check_wrap{
						display: flex;
						flex-direction: row;
						margin-bottom: 32rpx;
						.item{
							width: 88rpx;
							margin-right: 64rpx;
							position: relative;
							color: #929BA7;
							font-weight: 400;
							.text{
								width: 100%;
								text-align: center;
								height: 50rpx;
								font-size: 36rpx;
								line-height: 50rpx;
							}
							.line{
								position: absolute;
								bottom: -4rpx;
								left: 0;
								width: 88rpx;
								height: 20rpx;
								background: #5B90FF;
								border-radius: 4rpx;
								z-index: -1;
							}
						}
						.active{
							color: #3F4A58;
							font-weight: 600;
						}
					}
					.job_cont{
						width: 100%;
						.job_list{
							width: 100%;
							.job_item{
								background: #fff;
								margin-bottom: 24rpx;
								padding: 24rpx 32rpx 32rpx 32rpx;
								border-radius: 16rpx;
								box-shadow:0 0 18rpx 6rpx #F6F7F9;
								.job_title{
									display: flex;
									flex-direction: row;
									align-items: center;
									.job_name{
										flex: 1;
										height: 50rpx;
										font-size: 36rpx;
										font-weight: 600;
										line-height: 50rpx;
										color:rgba(63,74,88,1);
									}
									.job_wages{
										height: 50rpx;
										font-size: 36rpx;
										font-weight: 500;
										line-height: 50rpx;
										color:rgba(91,144,255,1);
										.text1{
											font-size: 30rpx;
											font-weight:500;
											margin: 0 4rpx;
										}
										.text2{
											font-size: 30rpx;
											font-weight:500;
										}
									}
								}
								.job_dem{
									margin: 16rpx 0 12rpx 0;
									text-align: left;
									height: 40rpx;
									font-size: 28rpx;
									font-weight: 400;
									line-height: 40rpx;
									color:rgba(63,74,88,1);
									.text3{
										margin: 0 24rpx;
									}
								}
								.job_label_box{
									width: 100%;
									overflow: hidden;
									white-space: nowrap;
									height: 48rpx;
									.scroll_label{
										width: 100%;
										height: 48rpx;
										line-height: 40rpx;
										overflow: hidden;
										.label{
											display: inline-block;
											background: #F6F7F9;
											height: 48rpx;
											line-height: 48rpx;
											padding: 0 16rpx;
											font-size: 24rpx;
											font-weight: 400;
											color:rgba(146,155,167,1);
											border-radius: 8rpx;
											margin-right: 16rpx;
										}
									}
								}
								.job_give{
									margin-top: 24rpx;
									display: flex;
									flex-direction: row;
									align-items: center;
									.avatar{
										width: 48rpx;
										height: 48rpx;
										border-radius: 50%;
										margin-right: 12rpx;
									}
									.name{
										text-align: left;
										height: 34rpx;
										font-size: 24rpx;
										font-weight: 600;
										line-height: 34rpx;
										color: #3F4A58;
									}
								}
							}
						}
						.no_job{
							width: 100%;
							padding: 160rpx 0;
							text-align: center;
							color: #424752;
							font-weight: 500;
							font-size: 30rpx;
						}
					}
					.synop_cont{
						width: 100%;
						.cont{
							text-align: left;
							font-size: 28rpx;
							font-weight: 400;
							line-height: 56rpx;
							color: #798594;
							.no_cont{
								width: 520rpx;
								height: 520rpx;
								margin: auto;
								background: url("https://ossdev0.jiabala.com/DRWDa3HHX2fQH")no-repeat 0 0/100% 100%;
								box-sizing: border-box;
								padding-top: 326rpx;
								transform: translateY(-44rpx);
								.text{
									text-align: center;
									height: 42rpx;
									font-size: 30rpx;
									font-weight: 400;
									line-height: 42rpx;
									color: #929BA7;
								}
							}
						}
					}
				}
			}
			.bind_mask{
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0);
				z-index: 999;
				.footer{
					position: fixed;
					bottom: 0;
					left: 0;
					right: 0;
					width: 100%;
					padding: 32rpx;
					box-sizing: border-box;
					background: #fff;
					.con_btn{
						width: 100%;
						height: 104rpx;
						text-align: center;
						line-height: 104rpx;
						font-size: 36rpx;
						font-weight: 400;
						color: #fff;
						background: #5B90FF;
						border-radius: 16rpx;
					}
				}
			}
		}
	}
</style>
